<template>
  <div>
    <a-drawer :visible="modalVisible" width="90%" @close="handleClose">
      <a-divider orientation="left">对内验工月报下达详情</a-divider>
      <button @click="save(dataSource)"
              style="width: 80px;height:30px;margin-bottom: 5px;color: #d1e9ff;background-color: #52c41a;border:0px"
              icon="ios-add">
        提交
      </button>
      <a-table style="margin-top: 30px" rowKey="reportId" ref="table" size="default" :multiple="true" :operator="operator"
               :pagination="false" :columns="columns" :data-source="inputData"
               :scroll="{ x:columns.length*150,y:columns.length*25}">
        <!--               :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"-->

        <!--        <span slot="number" slot-scope="text, record">-->
        <!--          <a-tag color="#108ee9" @click="$refs.resum.handleShow(record)">{{ text }}</a-tag>-->
        <!--        </span>-->

        <template v-for="col in editSlots" :slot="col" slot-scope="text, record, index" :row-selection="rowSelection">
          <div :key="col">
            <a-month-picker style="width: 100%" v-if="editingKey=== record.reportId&&col=='reportMonth'"
                           value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="date" v-model="reportMonth"
                           @change="handleChange(reportMonth,record.reportId, col,record)"></a-month-picker>
            <!--            <a-select v-else-if="editingKey=== record.reportId&&col=='caseType'" style="width: 150px;" showSearch-->
            <!--                      optionFilterProp="children" v-model="caseType"-->
            <!--                      @change="handleChange(caseType,record.reportId, col,record)">-->
            <!--              <a-select-option v-for="item in dicList" :key="item.name" :value="item.name">-->
            <!--                {{item.name}}-->
            <!--              </a-select-option>-->
            <!--            </a-select>-->
            <a-select v-else-if="editingKey=== record.reportId&&col=='vendorName'" style="width: 150px;"
                      showSearch optionFilterProp="children" v-model="vendorName"
                      @change="handleChange(vendorName, record.reportId, col,record)">
              <a-select-option v-for="item1 in supplierList" :key="item1.supplierName" :value="item1.supplierName">
                {{item1.supplierName}}
              </a-select-option>
            </a-select>
            <a-input-number :min="0" :max="record.supplierSum" v-else-if="editingKey=== record.reportId&&col=='declareQuantity'" style="margin: -5px 0"
                     :value="text" @change="(e) => handleChange(e, record.reportId, col,record)"/>
            <a-input-number :min="0" :max="record.supplierSum" v-else-if="editingKey=== record.reportId&&col=='confirmQuantity'" style="margin: -5px 0"
                     :value="text" @change="(e) => handleChange(e, record.reportId, col,record)"/>
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <template slot="operation" slot-scope="text, record,index">
          <a v-if="'' === editingKey" @click="() => edit(record,record.reportId)">编辑</a>
          <a v-else-if="editingKey=== record.reportId" @click="() => edit(record,record.reportId)">OK</a>
        </template>
      </a-table>
    </a-drawer>
  </div>
</template>
<script>
  import api from './js/apiReport'

  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    props: {
      detailsParams: {}
    },
    data() {
      //这里存放数据
      const operator = []
      operator.push({
        name: '提交',
        icon: 'import',
        that: this,
        handler: function(table, that) {
          that.save(that.dataSource)
        }
      })
      operator.push({
        name: '删除',
        icon: 'delete',
        batch: true,
        handler: function(table) {
          table.remove()
        }
      })
      return {
        selectedRowKeys: [],
        api: Object.assign(api, this.api),
        //列表初始化查询参数
        queryParam: {},
        flag: false,
        modalVisible: false,
        editingKey: '',
        scorykey: '',
        supplierId: '',
        value: '',
        reportMonth: '',
        declareQuantity: '',
        confirmQuantity: '',
        code: '',
        dicList: [],
        inputData: [],
        columns: [
          {
            title: '序号',
            width: 80,
            align: 'center',
            customRender: (text, record, index) => index + 1
          },
          {
            title: '验工月报编码',
            width: 180,
            align: 'center',
            dataIndex: 'reportId'
          },
          {
            title: '工程包名称',
            width: 150,
            align: 'center',
            dataIndex: 'packageName'
          },
          {
            title: '工程包代码',
            width: 150,
            align: 'center',
            dataIndex: 'packageNo'
          },
          {
            title: '服务代码',
            width: 150,
            align: 'center',
            dataIndex: 'serviceCode'
          },
          {
            title: '服务WBS代码',
            width: 150,
            align: 'center',
            dataIndex: 'serviceWbsCode'
          },
          {
            title: '科目名称',
            width: 150,
            align: 'center',
            dataIndex: 'subjectName'
          },
          {
            title: '层级号',
            width: 150,
            align: 'center',
            dataIndex: 'levelNo'
          },
          {
            title: '分承包发包项目描述',
            width: 150,
            align: 'center',
            dataIndex: 'packageDesc'
          },
          {
            title: '对外合同描述',
            width: 150,
            align: 'center',
            dataIndex: 'contractDesc'
          },
          {
            title: '区域',
            width: 150,
            align: 'center',
            dataIndex: 'materialArea'
          },
          {
            title: '系统',
            width: 150,
            align: 'center',
            dataIndex: 'materialUse'
          },
          {
            title: '计量单位',
            width: 150,
            align: 'center',
            dataIndex: 'measurementUnit'
          },
          {
            title: '合同清单工程量',
            width: 150,
            align: 'center',
            dataIndex: 'contractBillQuantity'
          },
          {
            title: '标前工程量',
            width: 150,
            align: 'center',
            dataIndex: 'beforeMarkQuantity'
          },
          {
            title: '100预算成本工程量',
            width: 200,
            align: 'center',
            dataIndex: 'costQuantity100'
          },
          {
            title: '200预算成本工程量',
            width: 200,
            align: 'center',
            dataIndex: 'costQuantity200'
          },
          {
            title: '供应商',
            width: 200,
            align: 'center',
            dataIndex: 'supplierName'
          },
          {
            title: '已分配合同量',
            width: 200,
            align: 'center',
            dataIndex: 'supplierSum'
          },
          {
            title: '填报月份',
            width: 150,
            align: 'center',
            dataIndex: 'reportMonth',
            scopedSlots: {
              customRender: 'reportMonth'
            }
          },
          {
            title: '申报报量',
            width: 100,
            align: 'center',
            dataIndex: 'declareQuantity',
            scopedSlots: {
              customRender: 'declareQuantity'
            }
          },
          {
            title: '确认报量',
            width: 100,
            align: 'center',
            dataIndex: 'confirmQuantity',
            scopedSlots: {
              customRender: 'confirmQuantity'
            }
          },
          {
            title: '操作',
            align: 'center',
            dataIndex: '',
            width: 100,
            scopedSlots: {
              customRender: 'operation'
            }
          }
        ],
        operator: operator,
        dataSource: [],
        dataValue: {},
        supplierList: [],
        editSlots: ['reportMonth', 'declareQuantity', 'confirmQuantity'],
        version: '',
        projectId: '',
        propTableData: {
          sel: null, // 选中行
          col: []
        },
        data: []
      }
    },
    methods: {
      handleShow(detailsParams) {
        this.isEdit = false
        var that = this
        setTimeout(() => {
          that.queryParam = detailsParams
          that.getecclData(detailsParams)
          // that.queryParam['projectId'] = projectId
          // that.queryParam['version'] = version
          // that.queryParam['excelKey'] = data
        }, 100)
        that.modalVisible = true
      },
      getecclData(detailsParams) {
        this.http.post(this, {
          url: this.api.preview.page,
          data: {
            params: detailsParams
          },
          success: function(me, data) {
            me.inputData = data
            me.dataSource = data
          }
        })
      },
      handleClose() {
        this.modalVisible = false
      },
      handleChange(value, key, column, record) {
        if (column === 'declareQuantity') {
          if (record['supplierSum'] <= value) {
            value = record['supplierSum']
          } else if (record['declareQuantity'] < 0) {
            value = 0
          }
        } else if (column === 'confirmQuantity') {
          if (record['declareQuantity'] <= value) {
            value = record['declareQuantity']
          } else if (record['confirmQuantity'] < 0) {
            value = 0
          }
        }
        console.log('column:' + column)
        console.log('value:' + value)
        const newData = [...this.dataSource]
        const target = newData.filter((item) => key === item.reportId)[0]
        record[column] = value
        if (target !== undefined && target) {
          target[column] = value
          target['reportId'] = record['reportId']
          // target['materialWbsCode'] = record['materialWbsCode']
          this.dataSource = newData
        } else {
          const newData2 = {}
          newData2.reportId = key
          newData2[column] = value
          newData2['reportId'] = record['reportId']
          // newData2['materialWbsCode'] = record['materialWbsCode']
          this.dataSource.push(newData2)
        }
        console.log('target[column] :' + target[column] )
      },
      edit(record, key) {
        this.reportMonth = ''
        this.declareQuantity = ''
        this.confirmQuantity = ''
        if (this.editingKey === key) {
          this.editingKey = ''
        } else {
          this.editingKey = key
        }
      },
      save(dataSource) {
        const jsonData = JSON.stringify(dataSource)
        this.http.post(this, {
          url: this.api.preview.syncData,
          data: {
            dataArray: jsonData,
            params: this.queryParam
          },
          success: function(me, data) {
            me.$message.success('操作成功')
            // me.$refs.table.refresh()
            me.$emit('previewTab')
            me.handleClose()
          }
        })
      },
      cancel(key) {
        const newData = [...this.dataSource]
        const target = newData.filter((item) => key === item.key)[0]
        this.editingKey = ''
        if (target) {
          delete target.editable
          this.dataSource = newData
        }
      },
      onSelectChange(selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys)
        this.selectedRowKeys = selectedRowKeys
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      // this.http.get(this, {
      //   url: this.api.purchases.getCaseTypeDate,
      //   data: {
      //     docTypes: 'docTypes'
      //   },
      //   success: function (me, data) {
      //     me.dicList = data
      //   }
      // })
      // this.http.get(this, {
      //   url: this.api.preview.getallSupplier,
      //   data: {
      //     docTypes: 'docTypes'
      //   },
      //   success: function (me, data) {
      //     me.supplierList = data
      //   }
      // })
    },
    computed: {
      hasSelected() {
        return this.selectedRowKeys.length > 0
      }
    }
  }
</script>

<style lang="scss" scoped>
  //@import url(); 引入公共css类
</style>

